import $ from "jquery";
import { Node } from "butterfly-dag";

import "./base_node.scss";

import DAG from "./DAG";

var clickTimer = null;
class BaseNode extends Node {
  constructor(opts) {
    super(opts);
    this.options = opts;
  }

  draw = (opts) => {
    let container = $(
      `<div class="relation-node" style='background:${opts.options.className}'></div>`
    )
      .css("top", opts.top)
      .css("left", opts.left)
      .attr("id", opts.id)
      .addClass(opts.options.className);

    let stateTxt = {
      "-1": "未提交",
      0: "提交成功",
      1: "正在运行",
      2: "准备暂停",
      3: "暂停",
      4: "准备停止",
      5: "停止",
      6: "运行失败",
      7: "运行成功",
      8: "未知错误",
      9: "忽略",
    };
    let logoContainer = null;
    if (
      opts.options.state &&
      opts.options.state !== "00" &&
      opts.options.state !== "000" &&
      opts.options.stateNum !== "88888"
    ) {
      logoContainer = $(
        `<div class="logo-container">${opts.options.name}${
          stateTxt[opts.options.state]
        }(${opts.options.stateNum})</div>`
      );
    } else {
      logoContainer = $(
        `<div class="logo-container titlestyle">${opts.options.name}</div>`
      );
    }
    if (opts.options.id == opts.options.clickId) {
      logoContainer.addClass("onactive");
    }
    logoContainer.addClass(`class${opts.options.state}`);

    this._onClick(logoContainer);
    this._onDblclick(logoContainer);
    this.rightClick(logoContainer);

    container.append(logoContainer);
    return container[0];
  };
  _onClick(dom) {
    dom.on("click", () => {
      // 先清除上次执行的Timer
      clearTimeout(clickTimer);
      // 利用Timer的时间间隔进行单击延时
      clickTimer = setTimeout(() => {
        DAG.methods.showData(this.options.state, this.options.id, this.options);
        // DAG.methods.getDag(this.options.state, this.options.id, this.options);
      }, 300);
    });
  }
  _onDblclick(dom) {
    dom.on("dblclick", () => {
      // console.log(this.options.id)
      // 先清除上次执行的Timer
      clearTimeout(clickTimer);
    });
  }
  rightClick(dom) {
    dom.on("mousedown", (e) => {
      e.preventDefault();
      if (e.which == 3) {
        DAG.methods.rightClick(e, this.options, true);
      } else {
        DAG.methods.rightClick(e, this.options, false);
      }
    });
    document.oncontextmenu = function (e) {
      e.preventDefault();
      document.addEventListener("click", function (event) {
        DAG.methods.rightClick(e, this.options, false);
      });
      // };
    };
  }
}

export default BaseNode;
